<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo3-6</title>
</head>

<body>
    <!--实战:简易购物车 -->
    <div id=" app" align=" center">
        <div>
            <!--商品添加 -->
            <p>商品编号:<input type="text" v-model="id"> </p>
            <p>商品名称:<input type="text" v-model="name"></p>
            <p>商品单价:<input type="text" v-model="price"></p>
            <p>商品数量:<input type="text" v-model="num"></p>
            <button @click="addGood">添加商品</button>
        </div>
        <hr>
        <div>
            <!--商品搜索 -->
            请输入关键字:<input type="text" v-model="keyword"/>
            <botton @click="searchGoods">搜索商品</botton>
        </div>
        </hr>
        <div v-if="goods.length != 0">
            <!--购物车 -->
            <table border="1">
                <tr>
                    <th>编号</th>
                    <th>
                        全选<input type="checkbox" v-model=" isAll" @change="selectAll" />
                        商品名称
                    </th>
                    <th>商品单价</th>
                    <th>商品数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in goods" :class=" {mybgcolor:( index+1) % 2 == 0} ">
                    <td>{{item.id}}</td>
                    <td>
                    <input type="checkbox" v-model="ckList" v-bind:value="item" @change="itemChange">
                    {{item.name}}
                    </td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="item.num--" v-bind:disabled="item.num == 1">-</button>
                        {{item.num}}
                        <button v-on:click="item.num++">+</button>
                    </td>
                    <td><button @click="deleteGood(index)">移除</button></td>
                </tr>
            </table>
                购物车商品总价:￥{{totalPrice || 0}}元
        </div>
        <div v-else>
            购物车为空
        </div>
    </div>
    <script>
        const comApp = Vue.createApp({
            data() {
                return {
                    goods: [
                        {
                            id: 1,
                            name: "华为手机",
                            price: 3688,
                            num: 1
                        },
                        {
                            id: 2,
                            name: "苹果手机",
                            price: 5688,
                            num: 1
                        },
                        {
                            id: 3,
                            name: "小米手机",
                            price: 1688,
                            num: 1
                        }

                    ],
                    //绑定到商品添加的控件
                    id: "",
                    name: "",
                    price: "",
                    num: " ",
                    keyword: "",//搜索关键字,
                    isAll: false,//是否全选
                    ckList: [] //选中的商品
                }
            },
            computed: {//定义计算属性来计算总价
                totalPrice() {
                    var total = 0;//总价
                    //遍历 goods
                    this.goods.forEach((item) => {
                        total += item.price * item.num;//累加
                    });
                    //返回总价
                    return total;
                }
            },
            methods: {
                //根据索引删除当前商品
                deleteGood(index) {//形参index 表示索引
                    this.goods.splice(index, 1);
                },
                //添加商品,新添加的商品必须是对象,且对象的属性必须与 soods 一致
                addGood() {
                    this.goods.push({
                        id: this.id,
                        name: this.name,
                        price: this.price,
                        num: this.num
                    });
                },
                //搜索商品
                searchGoods() {
                    var newArr = []; //保存搜索结果
                    //遍历 goods
                    this.goods.forEach((item) => {
                        //判断是否找到
                        if (item.name.indexOf(this.keyword) != -1) {
                            //将找到的数据对象添加到newArr
                            newArr.push(item);
                        }
                    });
                    //将搜索的结果赋值给 goods
                    this.goods = newArr.slice();
                },
                //商品全选,若全选,则将 goods的数据装入 ckList,否则清空 ckList
                selectAll() {
                    if (this.isAll) {
                        //slice()获取数组的所有元素并返回新的数组
                        this.ckList = this.goods.slice();
                    }else {
                        this.ckList = [];
                    }
                },
                //反向控制全选,若ckList长度与 goods 一致就全选状态,否则取消全选
                itemChange() {
                    if (this.ckList.length == this.goods.length) {
                        this.isAll = true;
                    } else {
                        this.isAll = false;
                    }
                }
            }
        }).mount("#app")
    </script>

</body>

</html>